<template>
	<van-tabbar route v-model="active" class="custom_footer_tabbar" active-color="#ee0000" fixed>
		<van-tabbar-item replace to="/home" class="van_tabbar_item">
			<span style="font-size: 0.8rem; font-family: 'PingFang SC';">Home</span>
			<template #icon="props">
				<img :src="require('../assets/home_icon.png')" class="tabbar-icon" style="width:2rem; height: 2rem;" />
			</template>
		</van-tabbar-item>

		<van-tabbar-item replace to="/draws" class="van_tabbar_item">
			<span style="font-size: 0.8rem; font-family: 'PingFang SC';">Draws</span>
			<template #icon="props">
				<img :src="require('../assets/history_draw_icon.png')" class="tabbar-icon"
					style="width: 2rem; height: 2rem;" />
			</template>
		</van-tabbar-item>

		<van-tabbar-item replace to="/cart" class="van_tabbar_item">
			<span style="font-size: 0.8rem; font-family: 'PingFang SC';">Cart</span>
			<template #icon="props">
				<img :src="require('../assets/draws_icon.png')" class="tabbar-icon"
					style="width: 2rem; height: 2rem;" />
			</template>
		</van-tabbar-item>
		
		<van-tabbar-item  replace to="/profile"  class="van_tabbar_item" :dot="showDot">
			<span style="font-size: 0.8rem; font-family: 'PingFang SC';">Profile</span>
			<template #icon="props">
				<img :src="require('../assets/me_icon.png')" class="tabbar-icon" style="width: 2rem; height: 2rem;" />
			</template>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	
	import { getCookie } from '../util';

	export default {
		data() {
			return {
				active: 0, // set the default active tab
				showDot:false,
			};
		},
		name: 'footer_nav',
		mounted() {
			var value = this.$cookies.get('dotShow')
			if(value == null) {
				//console.log("footer mounted getCookie dotShow value is null")
				value = false
				//this.showDot = value
			} else {
				//this.showDot = value
			}
			console.log("footer mounted  getCookie this.showDot is",this.showDot)
		
			// console.log("getCookie value is",typeof value)
		},
		methods: {
			onchange(index) {
				//console.log("xxxxxxxxxxxxx")
				showToast(`标签 ${index}`);
			},
			
		}
	};
</script>

<style>
	/* Vant组件的样式调整 */
	.vant-tabbar {
		/* flex: 1; */
		/* position: fixed; */
		/* bottom: 0; */
		width: 100vw;
		/* overflow-x: hidden; */
		/* 确保Tabbar不会导致横向滚动 */
		/* 设置你想要的高度 */
	}


	.custom_footer_tabbar {
		width: 100vw;
		position: fixed;
		line-height: var(--footer-height);
		/* background: #42b983; */
		color: #000000;
		background-color: rgba(250, 250, 250, 1);
		height: 5rem;

		/* --van-tabbar-item-active-color: #00FF00; */
		/* --van-tabbar-item-inactive-color: #00FF00; */

		/* 修改每个 tabbar item 的高度 */
		--van-tabbar-height: 5rem;
		--van-tabbar-item-height: 5rem;

		/* .tabbar-icon {
		 width: var(--icon-size, 10rem);
				height: var(--icon-size, 10rem); 
		}*/
	}

	.van_tabbar_item .van-tabbar-item--active {
		/* background-color: #00FF00; */
	}

	.van-tabbar__item--active {
		/* background-color: #00FF00; */
	}

	:deep(.van-tabbar-item) {
		/* color: red; */
		/* --van-tabbar-item-icon-size:200px; */
		--van-tabbar-item-font-size: var(--van-font-size-lg);
		height: 5rem;
		img {
			height: 5rem;
		}
		/* 		width: var(--icon-size, 200px);
				height: var(--icon-size, 200px); */
		/* --van-tabbar-background	:var(--van-background-1); */
		/* 		
		 --van-tabbar-item-icon-size:200px; */
	}
	:root {
		--van-tabbar-item-active-color:#ff9854 !important;
		--van-button-primary-background: red;
	}
	.van-toast__text {
	  font-size: 1.5rem;
	}
	.van-toast {
	  width: 80vw; /* 自定义宽度 */
	   height:10vh;
	}
</style>